<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/welcome.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./js/echarts.min.js"></script>
</head>
<body>
    <div style="margin-right: 40px;">
        <!-- 数据统计 -->
        <div class="statistics">
            <div class="col" style="background:#409EFF;">
                <div class="title">
                    <p>管理员统计</p>
                    <span>实时</span>
                </div>
                <div class="num" id="userCount">3</div>
                <div class="tip">当前总管理员数量</div>
            </div>
            <div class="col" style="background:#E6A23C;">
                <div class="title">
                    <p>部门统计</p>
                    <span>实时</span>
                </div>
                <div class="num">5</div>
                <div class="tip">当前总部门数量</div>
            </div>
            <div class="col" style="background:#67C23A;">
                <div class="title">
                    <p>员工统计</p>
                    <span>实时</span>
                </div>
                <div class="num">23</div>
                <div class="tip">当前总员工数量</div>
            </div>
            <div class="col" style="background:#909399;">
                <div class="title">
                    <p>考勤异常统计</p>
                    <span>实时</span>
                </div>
                <div class="num">8</div>
                <div class="tip">本月考勤异常人数</div>
            </div>
        </div>

        <!-- Echarts图表 -->
        <div class="echarts-container">
            <div id="chart1"></div>
            <div id="chart2"></div>
        </div>
    </div>

    <script>
        layui.use(['layer'], function () {
            var layer = layui.layer
            var $ = layui.jquery

            /**
             * 数据统计
             */
            setInterval(function () {
                // 获取管理员数量
                $.ajax({
                    url:'${pageContext.request.contextPath}/count.user',
                    dataType:'json',
                    success:function (res) {
                        if(res.code == 0){
                            $('#userCount').text(res.data)
                        }
                    }
                })


            },1000)

            /**
             * 初始化echarts实例
             */
            var chart1 = echarts.init(document.getElementById('chart1'))
            var option = {
                title: {
                    text: '员工入职情况',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'line',
                    },
                },
                xAxis: {
                    type: 'category',
                    data: ['03.20', '06.22','09.15', '12.04'],
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        data: [6, 14, 8, 10]
                    },
                ],
            }
            // 展示图表
            chart1.setOption(option)

            // 初始化echarts实例
            var chart2 = echarts.init(document.getElementById('chart2'))
            var option = {
                title: {
                    text: '部门员工分布',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)',
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    data: ['市场部','研发部','运维部'],
                },
                series: [
                    {
                        name: '部门员工分布',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            {value: 8, name: '市场部'},
                            {value: 10, name: '研发部'},
                            {value: 4, name: '运维部'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            }
            // 展示图表
            chart2.setOption(option)

        })
    </script>
</body>

</html>